<!--  -->
<template>
  <div class='shopsLove'>
    <van-sticky>
      <van-tabs 
        v-model="active" 
        :title-active-color="'var(--themeBaseColor)'" 
        title-inactive-color="#454545"
        line-width="15px"
        color="var(--themeBaseColor)"
        @click="tabLove">
        <block v-for="(item,index) in tabList" :key="index" >
          <van-tab :title="item.name"></van-tab>
        </block>
      </van-tabs>
    </van-sticky>
    <div class="love-list" v-if="active == 0">
      <div v-if="recordList.length > 0">
        <block v-for="(item,index) in recordList" :key="index">
          <div class="love-item">
            <div class="love-head flex-a-c flex-j-sb">
              <h3>{{item.value_type_name}}</h3>
              <p>{{item.change_value}}</p>
            </div>
            <div class="love-content flex-a-c flex-j-sb">
              <h4>{{item.created_at}}</h4>
              <div class="user-info flex-a-c" v-if="item.has_one_recipient">
                <span>受转人:</span>
                <img :src="item.has_one_recipient && item.has_one_recipient.avatar_image" />
                <p>{{item.has_one_recipient && item.has_one_recipient.username}}</p>
              </div>
            </div>
          </div>
        </block>
      </div>
      <van-empty description="暂无数据" v-else/>
    </div>
    <div class="love-income" v-if="active == 1">
      <div v-if="recordList.length > 0">
        <block v-for="(item,index) in recordList" :key="index">
          <div class="income-item">
            <h3>{{item.day_str}}</h3>
            <div class="income-main flex">
              <div class="income-left">
                <p>{{loveName}}释放:{{item.love_release_bonus}}</p>
                <p>手续费分红:{{item.love_poundage_dividend}}</p>
              </div>
              <div class="income-right">
                <p>{{usableLove}}转入:{{item.usable_love_transfer}}</p>
                <p>{{usableLove}}转入:{{item.usable_love_transfer}}</p>
              </div>
            </div>
          </div>
        </block>
      </div>
      <van-empty description="暂无数据" v-else/>
    </div>
    <div class="love-income" v-if="active == 2">
      <div v-if="recordList.length > 0">
        <block v-for="(item,index) in recordList" :key="index">
          <div class="income-item">
            <h3>{{item.day_str}}</h3>
            <div class="income-main flex">
              <div class="income-left">
                <p>个人转换:{{item.self || '0.00'}}</p>
                <p>平级转换:{{item.same || '0.00'}}</p>
                <p>股东转换:{{item.shareholder || '0.00'}}</p>
                <p>区域转换:{{item.area || '0.00'}}</p>
              </div>
              <div class="income-right">
                <p>团队转换:{{item.team || '0.00'}}</p>
                <p>推荐加速:{{item.release_bonus || '0.00'}}</p>
                <p>总转换:{{item.all || '0.00'}}</p>
              </div>
            </div>
          </div>
        </block>
      </div>
      
    </div>
    <div class="mb50"></div>
  </div>
</template>

<script>
import shopsLove_controller from "./shopsLove_controller";
export default shopsLove_controller;
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .shopsLove ::v-deep .van-tabs__line {
    bottom:20px;
  }
  .mb50 {
    height: 50px;
    clear: both;
  }
  .love-list {
    margin:12px 12px 0 12px;
    .love-item {
      padding:12px;
      border-radius: 4px;
      background-color: #fff;
      margin:0 0 10px 0;
      .love-head {
        h3 {
          font-size: 15px;
          font-weight: 400;
          color: #333333;
        }
        p {
          font-size: 15px;
          font-weight: bold;
          color: #FE5E56;
        }
      }
      .love-content {
        padding:12px 0 0 0;
        h4 {
          font-size: 12px;
          font-weight: 400;
          color: #999999;
        }
        .user-info {
          span {
            font-size: 12px;
            font-weight: 400;
            color: #999999;
          }
          img {
            width:20px;
            height: 20px;
            display: block;
            border-radius: 50%;
            margin:0 4px;
          }
          p {
            font-size: 12px;
            color: #333333;
          }
        }
      }
    }
  }
  .love-income {
    margin:12px 12px 0 12px;
    .income-item {
      background-color: #fff;
      border-radius: 4px;
      padding:12px 12px 4px 12px;
      margin:0 0 15px 0;
      h3 {
        color: #333333;
        font-size: 15px;
        text-align: left;
        font-weight: 400;
      }
      .income-main {
        padding:12px 0 0 0;
        
        .income-left,.income-right {
          flex:0 0  50%;
          text-align:left;
          p {
            font-size: 12px;
            font-weight: 400;
            color: #333333;
            padding:0 0 8px 0;
          }
        }
      }
    }
  }
</style>